<template>
  <div class="app-container">
    <div class="group">
      <div class="doc"><p >1、文件下载示例</p></div>
      <el-button-group>
        <el-button type="primary" icon="el-icon-download" @click="download()">文件下载</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="clearDl()">清空下载</el-button>
      </el-button-group>
      <div style="padding:10px 0;"></div>
      <el-row :gutter="20">
        <el-col :span="3"><el-tag>下载进度</el-tag></el-col>
        <el-col :span="12"><el-progress :text-inside="true" :stroke-width="24" :percentage="dlInfo.percent" status="success"></el-progress></el-col>
        <el-col :span="8" style="min-width: 200px;"><el-tag type="success">当前进度:{{ dlInfo.transferredBytes }}</el-tag><el-tag>文件总大小: {{ dlInfo.totalBytes }}</el-tag></el-col>
      </el-row>
    </div>
    <div class="group">
      <div class="doc"><p >2、PDF在线预览</p></div>
      <el-button-group>
        <el-button type="primary" icon="el-icon-view" @click="viewPdf()">预览PDF</el-button>
      </el-button-group>
    </div>    
  </div>
</template>

<script>
const logger  = require('@/utils/electron/index').Logger('Advanced')
export default {
  name: "Advanced",
  data() {
    return {
      dlInfo:{
        percent: 0,
        transferredBytes: 0,
        totalBytes: 0
      }
    }
  },
  created() {
    let that = this
    this.$ipc.answerMain('dlOnProgress', response => {
      that.dlInfo.totalBytes = (response.totalBytes / (1024 * 1024)).toFixed(2) + "MB"
      that.dlInfo.transferredBytes =  (response.transferredBytes / (1024 * 1024)).toFixed(2) + "MB"
      that.dlInfo.percent = Number((response.percent * 100).toFixed(0))
    })
    this.$ipc.answerMain('dlOnCompleted', response => {
      this.$modal.msgSuccess('下载完成')
    })
  },
  methods: {
		download(){
      let downloadUrl = 'https://gitee.com/star45/future-common/attach_files/1000228/download/RediSearch-2.2.9.tar.gz'
      let that = this
			that.$ipc.callMain('download-button',{url: downloadUrl,dlProgress:'dlOnProgress',dlCompleted:'dlOnCompleted'});
		}
    ,clearDl() {
      this.dlInfo = {  percent: 0, transferredBytes: 0, totalBytes: 0}
      this.$modal.msgSuccess('清空下载')
    }
    ,viewPdf(){
      this.$ipc.callMain('viewPdf','http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf')
    }
    
  }
}
</script>
<style lang="scss" scoped>
  @import "~@/assets/styles/variables.scss";
  .group{
    .doc {
      
      margin-bottom: 10px;
      padding-block: 10px;
    }
    .doc p {
      color: $light-blue;
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 6px;
    }

  }

</style>